@model SF.Module.Backend.ViewModels.HomeViewModel

@{
    ViewData["Title"] = "开发框架在线演示";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="~/lib/ueditor//third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" href="~/lib/ueditor//third-party/SyntaxHighlighter/shCoreDefault.css">

<section id="page-title">
    <h1 class="title">
        <div class="page-icon">
            <i class="fa fa-exchange"></i>
        </div>
        控制台
    </h1>
</section>

<section id="page-content">
    <div class="row">
        <div class="col-md-12">
            <div class="editor-area">
                <div>
                    <h2>写新文章</h2>
                    <script id="editor" type="text/plain" style="height:500px;">
                    </script>
                </div>
                <div id="btns">
                    <div>
                        <button onclick="getAllHtml()">获得整个html的内容</button>
                        <button onclick="getContent()">获得内容</button>
                        <button onclick="setContent()">写入内容</button>
                        <button onclick="setContent(true)">追加内容</button>
                        <button onclick="getContentTxt()">获得纯文本</button>
                        <button onclick="getPlainTxt()">获得带格式的纯文本</button>
                        <button onclick="hasContent()">判断是否有内容</button>
                        <button onclick="setFocus()">使编辑器获得焦点</button>
                        <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
                        <button onmousedown="setblur(event)">编辑器失去焦点</button>
                    </div>
                    <div>
                        <button onclick="getText()">获得当前选中的文本</button>
                        <button onclick="insertHtml()">插入给定的内容</button>
                        <button id="enable" onclick="setEnabled()">可以编辑</button>
                        <button onclick="setDisabled()">不可编辑</button>
                        <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
                        <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
                        <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
                    </div>
                    <div>
                        <button onclick="getLocalData()">获取草稿箱内容</button>
                        <button onclick="clearLocalData()">清空草稿箱</button>
                    </div>
                </div>
                <div>
                    <button onclick="createEditor()">创建编辑器</button>
                    <button onclick="deleteEditor()">删除编辑器</button>
                </div>

            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="editor-area">
                <h3>文件上传测试</h3>
                <div id="upload">
                    <a id="uploadButton" href="javascript:void(0);">
                        +
                        <input type="file" name="file" id="file" />
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="editor-area">
                <h3>代码高亮</h3>
                <pre class="brush:c#;toolbar:false">﻿using System.Collections.Generic;
using System.Globalization;
using System.IO;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Localization;
using Microsoft.Extensions.FileProviders;
using Microsoft.Extensions.Configuration;
using System.Linq;
using System.Reflection;
using System;
namespace SF.WebHost.Extensions
{
    public static class ApplicationBuilderExtensions
    {
      
        /// &lt;summary&gt;
        /// 配置多语言信息
        /// &lt;/summary&gt;
        /// &lt;param name=&quot;app&quot;&gt;&lt;/param&gt;
        /// &lt;returns&gt;&lt;/returns&gt;
        public static IApplicationBuilder UseCustomizedRequestLocalization(this IApplicationBuilder app)
        {
            var supportedCultures = new[]
            {
                new CultureInfo(&quot;zh&quot;),
                new CultureInfo(&quot;en&quot;),
            };
            app.UseRequestLocalization(new RequestLocalizationOptions
            {
                DefaultRequestCulture = new RequestCulture(&quot;en&quot;, &quot;en&quot;),
                SupportedCultures = supportedCultures,
                SupportedUICultures = supportedCultures
            });
            return app;
        }
        /// &lt;summary&gt;
        /// Hangfire配置
        /// &lt;/summary&gt;
        /// &lt;param name=&quot;app&quot;&gt;&lt;/param&gt;
        /// &lt;param name=&quot;configuration&quot;&gt;&lt;/param&gt;
        /// &lt;returns&gt;&lt;/returns&gt;
        public static IApplicationBuilder UseCustomizedHangfire(this IApplicationBuilder app, IConfigurationRoot configuration)
        {
         //   Hangfire.GlobalConfiguration.Configuration.UseSqlServerStorage(configuration.GetConnectionString(&quot;DefaultConnection&quot;));
            //app.UseHangfireDashboard();
            //app.UseHangfireServer();
            //
            return app;
        }
    }
}</pre>
                <p>
                    <br />
                </p>
            </div>
        </div>
    </div>
</section>
<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');

    $(function () {
        SyntaxHighlighter.all();
        $("#upload").on("click", "img", function () { $(this).remove(); UpdatePicture(); });

        $("#file").change(function () {
            var fs = $("#file")[0].files;
            if (fs.length > 0) QiniuUpload(fs[0]);
        });
    });


    function isFocus(e) {
        alert(UE.getEditor('editor').isFocus());
        UE.dom.domUtils.preventDefault(e)
    }
    function setblur(e) {
        UE.getEditor('editor').blur();
        UE.dom.domUtils.preventDefault(e)
    }
    function insertHtml() {
        var value = prompt('插入html代码', '');
        UE.getEditor('editor').execCommand('insertHtml', value)
    }
    function createEditor() {
        enableBtn();
        UE.getEditor('editor');
    }
    function getAllHtml() {
        alert(UE.getEditor('editor').getAllHtml())
    }
    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getContent());
        alert(arr.join("\n"));
    }
    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getPlainTxt());
        alert(arr.join('\n'))
    }
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
        UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
        alert(arr.join("\n"));
    }
    function setDisabled() {
        UE.getEditor('editor').setDisabled('fullscreen');
        disableBtn("enable");
    }

    function setEnabled() {
        UE.getEditor('editor').setEnabled();
        enableBtn();
    }

    function getText() {
        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
        var range = UE.getEditor('editor').selection.getRange();
        range.select();
        var txt = UE.getEditor('editor').selection.getText();
        alert(txt)
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为：");
        arr.push(UE.getEditor('editor').getContentTxt());
        alert(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(UE.getEditor('editor').hasContents());
        alert(arr.join("\n"));
    }
    function setFocus() {
        UE.getEditor('editor').focus();
    }
    function deleteEditor() {
        disableBtn();
        UE.getEditor('editor').destroy();
    }
    function disableBtn(str) {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            if (btn.id == str) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            } else {
                btn.setAttribute("disabled", "true");
            }
        }
    }
    function enableBtn() {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
        }
    }

    function getLocalData() {
        alert(UE.getEditor('editor').execCommand("getlocaldata"));
    }

    function clearLocalData() {
        UE.getEditor('editor').execCommand("clearlocaldata");
        alert("已清空草稿箱")
    }

    function QiniuUpload(file) {

        var ext = file.name.split('.').pop().toLowerCase();
        var allow = ["png", "jpg", "jpeg", "bmp", "gif"]

        if (allow.indexOf(ext) < 0) {
            alert("文件格式错误。");
            return;
        }

        var formData = new FormData();

        formData.append('key', key);
        formData.append('token', token);
        formData.append('file', file);

        var xhr = new XMLHttpRequest();

        xhr.open('POST', upDomain, true);
        xhr.send(formData);
        xhr.onreadystatechange = function (response) {
            if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
                var url = JSON.parse(xhr.responseText).key;
                $("#uploadButton").before("<img width='100' height='100' title='单击删除' src='" + fsDomain + "/" + url + suffix + "'/>");
                UpdatePicture();
                InitParams();
            } else if (xhr.status != 200 && xhr.responseText) {
                alert(xhr.responseText);
            }
        };
    }

    function UpdatePicture() {
        var urls = new Array();
        $("#upload").children("img").each(function () {
            urls.push((this).src.replace(suffix, ""));
        });
        if (urls.length > 0) {
            $("#Picture").val(urls.join(","));
        }
        else {
            $("#Picture").val("");
        }
    }

    function InitPicture() {
        var imgs = $("#Picture").val();
        if (imgs.length > 0) {
            var arr = imgs.split(',');
            arr.forEach(function (item) {
                $("#uploadButton").before("<img width='100' height='100' title='单击删除' src='" + item + suffix + "'/>");
            });
        }
    }

    function InitParams() {
        $.ajax({
            async: false,
            type: "get",
            url: "/Api/UEditor/getToken?filetype=image",
            dataType: 'json',
            success: function (data) {
                fsDomain = data.fsdomain;
                upDomain = data.updomain;
                key = data.filename;
                token = data.token;
                suffix = data.suffix;
            }
        });
    }
</script>